<template>
  <div class="autoplay-mask" v-if="visible">
    <div class="autoplay-content">
      <div class="autoplay-title">{{ props.type }}已开始</div>
      <button class="autoplay-btn" @click="handleClick">
        <svg
          class="icon"
          viewBox="0 0 24 24"
          width="24"
          height="24"
          fill="white"
          style="margin-right: 8px"
        >
          <rect
            x="3"
            y="5"
            width="15"
            height="14"
            rx="2"
            fill="white"
            opacity="0.8"
          />
          <polygon points="10,9 16,12 10,15" fill="#1976d2" />
        </svg>
        进入{{ props.type }}
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const emits = defineEmits(["close"]);
const visible = ref(true);
const props = defineProps({
  type: {
    type: String,
    default: "直播"
  }
});
function handleClick() {
  visible.value = false;
  emits("close");
}
</script>

<style scoped>
.autoplay-mask {
  position: fixed;
  inset: 0;
  background: rgba(120, 120, 120, 0.55);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.autoplay-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.autoplay-title {
  color: #fff;
  font-size: 2rem;
  margin-bottom: 2.5rem;
  font-weight: 500;
  text-align: center;
}
.autoplay-btn {
  display: flex;
  align-items: center;
  background: #2196f3;
  color: #fff;
  border: none;
  border-radius: 1.5rem;
  padding: 1rem 2.5rem;
  font-size: 1.5rem;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  transition: background 0.2s;
}
.autoplay-btn:active {
  background: #1976d2;
}
.icon {
  display: inline-block;
}
</style>
